<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue入门案例</title>
    <!-- 引入vue.js资源-->
    <script type="application/javascript" src="./node_modules/vue/dist/vue.js"></script>
</head>
<!-- vue不能够直接作用在body元素上-->
<body>
        <!--
           使用v-text和v-html指令来代替{{}}
           说明:
               v-text:将数据输出到元素内部,如果输出的数据有HTML代码,会作为"普通文本"输出
               v-html:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染.
        -->
   <div id="app">
       <!--先来一个插值表达式,用来取值,原样输出data中的数据-->
       {{text}}<br>
       <!--v-text指令,原样输出data中的数据  -->
       <div v-text="text"></div><br>
       <!--v-html指令,可以解析data中的数据的html内容  -->
       <div v-html="text"></div>
   </div>

</body>
<script>
    /*每个vue应用都是通过Vue函数创建一个新的VUE实例开始的.*/
    new Vue({
        el:"#app",//每个Vue实例都需要关联一段HTml模板,Vue会基于此模板进行视图渲染.我们可以通过el属性来指定.
        data:{//当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染.并且"监视"data中的属性变化,
            text:"<span style='color: red'>好好学习,努力找个好工作</span>"
        }
    })

</script>
</html>